<template>
    <div>
        <div class="header-top">
            <img src="kandian/zufang/1.png" @click="funr() "/>
            <h3>租约</h3>
        </div>
        <div class="nav">
            <div class="nav1">
                <h1>我租住的房源</h1>
                <div class="navtop">
                      <h2>您还没有租约</h2>
                      <span class="navtop2">我要租房</span>
                </div>
            </div>
            <div class="nav2"><img src="kandian/zufang/bg2.png" alt=""></div>
            <div class="nav3">
                <Zu3/>
            </div>
        </div>
        <div class="kong"></div>
        <Botbar />
    </div>
</template>
<script>
import Botbar from "@/components/zufang/botbar.vue"
import Zu3 from "@/components/zufang/zu3.vue"
export default {
    components:{
        Botbar ,
        Zu3
    },
    methods:{
        funr(){
            this.$router.push("/zu")
        }
    }
}
</script>
<style scoped>
    .header-top {
  background: white;
  height: 50px;
  line-height: 50px;
  width: 100%;
  position: fixed;
  top: 0px;
  padding-right: 40px;
  padding-left: 20px;
}
.header-top h3 {
  text-align: center;
  font-weight: bold;
}
.header-top img {
  width: 20px;
  height: 20px;
  float: left;
  margin-top: 15px;
}
.nav{
    width:90%;
    margin:0px auto;
    margin-top:70px;
    display:flex;
    flex-direction:column;
    justify-content:space-evenly;
}
.nav1{
    width:100%;
    height:220px;
    display:flex;
    flex-direction:column;
    justify-content:space-around;
}
.nav1 h1{
    font-size:22px;
    font-weight:800;    
}
.navtop h2{
    font-size:16px;
    font-weight:600;
    margin:0 auto; 
}
 .nav1 .navtop{
    width:90%;
    margin:0 auto;
    height:130px;
    border:1px solid #eff0f3;
    box-shadow:0px 0px 14px 4px #ebebeb;
    display:flex;
    flex-direction:column;
    justify-content:space-evenly;
}
.navtop .navtop2{
    margin:0 auto;
    height:30px;
    border:1px solid #999;
    padding:4px 20px;
}
.nav2{
    width:100%;
}
.nav2 img{width:100%;
    height:80px;
}
.nav3{
    width:100%;
    margin-top:20px;
}
.kong{
         margin-top:0.6rem;
    }
</style>